<template>
	<view class="wrap">

		<u-navbar title-size="36" title-color="#fff" :background="background" :border-bottom="false" :is-back="false"
			title=" ">
			<view class="slot-wrap">
				<view @click="checkCity" class="addr">
					<text>{{vuex_userCity}}</text>
					<u-icon name="arrow-down" color="#fff" size="20"></u-icon>
				</view>
				思仁论事
			</view>

		</u-navbar>
		<u-picker mode="region" :columns="2" v-model="pickerShow" @confirm="regionConfirm"></u-picker>

		<view class="infos">
			<view class="deco">
				<image src="/static/aidex/images/2.png" mode=""></image>
			</view>
			<view class="content">
				<view class="swiper">
					<u-swiper @click="clickBanner" bg-color="none" height="298" border-radius="24"
						:list="list"></u-swiper>
				</view>
				<!-- <text @click="go1">证书报名</text> -->

				<view class="newzixun">
					<view class="left" @click="jion">
						<view class="name">
							年卡VIP
						</view>
						<view class="dec2">
							每天仅需1元
						</view>
						<view class="ljkt">
							立即开通
						</view>
					</view>
					<view class="right">
						<view class="top1">
							<view class="same item" @click="navTo('/pages/sys/home/zixun')">
								<view class="">
									<view class="name">
										<text style="color: red;">0元</text>
										咨询
									</view>
									<view class="desc1">
										金牌律师
									</view>
								</view>
								<image src="/static/aidex/images/lyzx.png" mode=""></image>

							</view>
							<view class="same item dif" @click="navTo('/pages/sys/home/hetong')">
								<view class="">
									<view class="name">
										合同模板
									</view>
									<view class="desc1">
										有法律约束力
									</view>
								</view>
								<image src="/static/aidex/images/htmb.png" mode=""></image>

							</view>
						</view>
						<view class="bot same" @click="navTo('/pages/sys/home/cert')">
							<image class="deco" src="/static/aidex/images/certbg.png" mode=""></image>
							<!-- <image class="deco" src="static/aidex/images/zsbg.png" mode=""></image> -->
							<view class="info1">
								<view class="infos1">
									<view class="name">
										证书报名入口
									</view>
									<view class="desc1">
										律师经纪人证书重塑职业新赛道
									</view>
								</view>
								<image src="/static/aidex/images/zsbm.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="navs">
					<view class="item one" @click="jion">
						<view class="name">
							<view class="top">
								年卡会员
							</view>
							<view class="bot">
								每天仅需1元
							</view>
						</view>
						<image class="narrow" src="/static/aidex/images/11.png" mode=""></image>
						<image class="img" src="/static/aidex/images/vip.png" mode=""></image>
					</view>
					
					<view @click="ai" class="item two">
						<view class="name">
							<view class="top">
								AI咨询 <image class="narrow" src="/static/aidex/images/10.png" mode=""></image>

							</view>
							<view class="bot">
								金牌律师在线解答
							</view>
						</view>
						<image class="img" src="/static/aidex/images/3.png" mode=""></image>
					</view>
				</view> -->
				<!-- 专业咨询 -->
				<view class="ask">
					<view class="title">
						<view class="name">
							<view class="line">

							</view>
							专业咨询
						</view>
						<view class="more" @click="zxmore">
							查看更多
						</view>
					</view>
					<view class="nav1">
						<u-grid :col="4" :border="none">
							<u-grid-item @click="navTozx(item)" :key="index" v-for="(item,index) in navlist">
								<image :src="item.image" mode=""></image>
								<view class="grid-text">{{item.name}}</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
				<view class="ask lawyer">
					<view class="title">
						<view class="name">
							<view class="line">

							</view>
							金牌律师
						</view>
						<view class="more" @click="navTo('/pages/sys/home/goldMedalLawyer')">
							查看更多
						</view>
					</view>
					<view class="nav3">


						<scroll-view v-if="lawyerlist && lawyerlist.length" scroll-x="true"
							style="white-space: nowrap;">
							<!-- <view v-for="item in 5" style="display: inline-block; width: 100px;">内容1</view> -->
							<view class="item" :key="item.id" v-for="(item,index) in lawyerlist"
								@click="lawyernavTo(item)">
								<u-avatar class="avatar" size="120" :src="item.image"></u-avatar>
								<view class="name">
									{{item.name}}律师
								</view>
								<view class="year">
									执业{{item.beendate}}年
								</view>
								<view class="answer">
									解答<text>{{item.seekcount}}</text>次
								</view>
							</view>
						</scroll-view>

						<view v-else class="empty" style="margin: 0 auto;">
							<view v-if="!(lawyerlist && lawyerlist.length) && senDate" class="emptyAddress-box">
								<u-empty src="https://zzdiy-prod.oss-cn-chengdu.aliyuncs.com/zzdiy_seller/empty.png"
									icon-size="240" text="暂无数据" mode="data"></u-empty>
							</view>
						</view>


					</view>
				</view>
				<view class="ask pick">
					<view class="title">
						<view class="name">
							<view class="line">

							</view>
							精选服务
						</view>
						<view class="more" @click="jxmore">
							查看更多
						</view>
					</view>
					<view class="nav2">
						<view @click="godetail(item)" class="item" :key="index" v-for="(item,index) in navlist2">
							<view class="name">
								<view class="top">
									{{item.name}}
								</view>
								<view class="bot">
									{{item.remark}}
								</view>
							</view>
							<image :src="item.image" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		

	</view>

</template>
<script>
	import QQMapWX from "../../../utils/qqmap-wx-jssdk.js"

	let qqmapsdk;
	const mapInit = () => {
		qqmapsdk = new QQMapWX({
			// key: "USBBZ-LDRKQ-WEL52-BU2NM-WHPVH-K2FGB",
			key: "S3EBZ-UHKWZ-6MBXH-76P6P-O43F5-CWBIM",

		})
	}


	export default {
		data() {
			return {
				senDate: false,
				pickerShow: false,
				lawyerlist: [],
				navlist2: [{
					name: "离婚协议",
					desc: "离婚、财产分割",
					bg: 'rgba(239,123,100,0.05)',
					src: "/static/aidex/images/4.png"
				}, {
					name: "借款欠款",
					desc: '个人与企业借款',
					bg: 'rgba(249,162,36,0.05)',
					src: "/static/aidex/images/8.png"
				}, {
					name: "还款协议",
					desc: '分期还款无压力',
					bg: 'rgba(56,138,251,0.05)',
					src: "/static/aidex/images/5.png"
				}, {
					name: "合同定制",
					desc: '800万模版可选',
					bg: 'rgba(106,142,241,0.06)',
					src: "/static/aidex/images/6.png"
				}, {
					name: "婚前协议",
					desc: '财产证明，分割',
					bg: 'rgba(239,123,100,0.05)',
					src: "/static/aidex/images/7.png"
				}, {
					name: "遗嘱继承",
					desc: '遗嘱继承0风险',
					bg: 'rgba(239,122,98,0.05)',
					src: "/static/aidex/images/9.png"
				}],
				navlist: [{
					name: "婚姻家庭",
					src: "/static/aidex/images/a1.png"
				}, {
					name: "民间借贷",
					src: "/static/aidex/images/a2.png"
				}, {
					name: "交通事故",
					src: "/static/aidex/images/a3.png"
				}, {
					name: "刑事犯罪",
					src: "/static/aidex/images/a4.png"
				}, {
					name: "劳动纠纷",
					src: "/static/aidex/images/a5.png"
				}, {
					name: "遗嘱继承",
					src: "/static/aidex/images/a6.png"
				}, {
					name: "房产纠纷",
					src: "/static/aidex/images/a7.png"
				}, {
					name: "侵权赔偿",
					src: "/static/aidex/images/a8.png"
				}],
				background: {
					backgroundColor: "#0fbcae",
				},
				list: [{
						image: "https://zzdiy-prod.oss-cn-chengdu.aliyuncs.com/zzdiy_seller/banner1.png",

					},
					{
						image: "https://zzdiy-prod.oss-cn-chengdu.aliyuncs.com/zzdiy_seller/banner1.png",

					}
				],
			};
		},


		onLoad(e) {
			this.$u.vuex("vuex_userShareCode", e?.invite_code);
			if (this.vuex_userCity) {

			} else {
				mapInit();

				qqmapsdk.reverseGeocoder({
					success: res => {
						console.log(res?.result?.address_component?.city, '位置信息');
						this.$u.vuex("vuex_userCity", res?.result?.address_component?.city || '西安');
						this.getlawyerlists()
					},
				})
			}
			this.getbanners()
			this.getzixun()
			this.getservice()
			this.getlawyerlists()
		},
		methods: {
			go1() {
				uni.navigateTo({
					url: "/pages/sys/home/cert"
				})
			},
			ai() {
				uni.showToast({
					icon: 'none',
					title: "高级客户解锁"
				})
			},
			jion() {
				uni.navigateTo({
					url: "/pages/sys/user/join?from=index"
				})
			},
			regionConfirm(e) {
				let res = e.city.label;

				this.$u.vuex("vuex_userCity", res);
				this.getlawyerlists()
			},
			checkCity() {
				this.pickerShow = true
			},
			getlawyerlists() {
				this.lawyerlis = []
				this.senDate = false;
				let query = {
					city_name: this.vuex_userCity,
					page: 1,
					limit: 8,
				}
				this.$u.api
					.lawyerlists(query)
					.then((res) => {
						this.senDate = true;
						if (res) {
							this.lawyerlist = res?.data?.list;
						}
					});
			},
			lawyernavTo(item) {
				uni.navigateTo({
					url: `/pages/sys/home/detail?id=${item.id}`
				});
			},
			navTozx(item) {
				uni.navigateTo({
					url: `/pages/sys/home/zixunitemdetail?id=${item.id}`
				});
			},
			zxmore() {
				uni.switchTab({
					url: "/pages/sys/workbench/index"
				})
			},
			jxmore() {
				uni.switchTab({
					url: "/pages/sys/service/index"
				})
			},
			getservice() {

				let query = {
					is_new: 1,
					page: 1,
					limit: 6,
				}
				this.$u.api
					.serverlist(query)
					.then((res) => {

						if (res) {

							const newlist = res?.data?.list;
							// this.navlist2 = newlist.slice(0, 6)
							this.navlist2 = newlist
							// this.navlist2 = this.navlist2.splice(0, 6)
						} else {

						}
					});
			},

			getzixun() {

				let query = {
					page: 1,
					limit: 8,
					is_new: 1,
				}

				this.$u.api
					.zixunlist(query)
					.then((res) => {

						if (res) {

							this.navlist = res?.data?.list;

						} else {

						}
					});
			},

			getbanners() {
				this.$u.api
					.banners()
					.then((res) => {
						this.list = res?.data
						console.log(res, 8888)
					});
			},
			clickBanner(index) {
				let url = this.list[index]?.link;
				if (url) {
					uni.navigateTo({
						url: link
					})
				}
			},
			godetail(item) {
				uni.navigateTo({
					url: `/pages/sys/home/fuwuitemdetail?id=${item.id}`
				});
			},
			getAddress() {
				console.log(44444)
				try {
					let that = this
					uni.getLocation({
						// type: 'wgs84',
						success: function(res) {
							console.log('当前位置的经度：' + JSON.stringify(res));
							console.log('当前位置的纬度：' + res.latitude);
							console.log(qqmapsdk, '&&&&')

							qqmapsdk.reverseGeocoder({
								//根据经纬度获取地址信息

								//location: {
								//latitude: 39.984060,
								//longitude: 116.307520
								//},
								location: {
									latitude: res.latitude,
									longitude: res.longitude
								},
								success: res => {
									console.log(res, '位置信息');
								},

							})



							// that.longitude = res.longitude
							// that.latitude = res.latitude
							// that.$u.vuex('vuex_Long', res.longitude);
							// that.$u.vuex('vuex_Lat', res.latitude);
							// that.getDate()
						},
						fail: function(res) {

							console.log(res, 888)
							// this.longitude =that.$u.vuex('vuex_Long')
							// this.latitude = that.$u.vuex('vuex_Lat')
							// that.getDate()
						},
					});

				} catch (e) {
					// this.longitude =34.236057
					// this.latitude = 108.956218
					// that.getDate()
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
		}
	};
</script>
<style>
	page {
		background: #EEF2F3;
	}
</style>
<style scoped lang="scss">
	.newzixun {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 24rpx 24rpx;

		.left {
			width: 234rpx;
			height: 233rpx;
			background: linear-gradient(270deg, #FDE4CF 0%, #F8EEE5 100%);
			box-shadow: inset 0rpx 0rpx 8rpx 2rpx rgba(250, 182, 123, 0.26);
			border-radius: 20rpx;
			margin-right: 16rpx;

			.name {
				margin-top: 27rpx;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #BC5F0F;
				line-height: 45rpx;
			}

			.dec2 {
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #BC5F0F;
				line-height: 28rpx;
				margin-bottom: 73rpx;
			}

			.ljkt {
				width: 147rpx;
				margin: 0 auto;
				height: 42rpx;
				background: #BC5F0F;
				border-radius: 21rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 33rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.right {
			width: 452rpx;
			height: 233rpx;
			
			.bot{
				width: 452rpx;
				height: 109rpx;
				
				// width: 452rpx;
				// height: 109rpx;
				// background: url("/static/aidex/images/zsbg.png") no-repeat;
				// background-size: cover;
				position: relative;
				.deco{
					
					width: 452rpx;
					height: 109rpx;
				}
				.info1{
					padding: 18rpx 12rpx 24rpx;
					z-index: 1;
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						width: 59rpx;
						height: 59rpx;
					}
				}
			}

			.top1 {
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;

				.item{
					padding: 18rpx 12rpx 24rpx;
					width: 218rpx;
					height: 109rpx;
					background: linear-gradient(  #FFFFFF 0%, #EDFEF8 100%);
					border-radius: 16rpx;
					&.dif{
						margin-left: 16rpx;
						width: 218rpx;
						height: 109rpx;
						background: linear-gradient( #FFFFFF 0%, #D8E8FD 100%);
						border-radius: 20rpx;
					}
				}
			}
			
			.same {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 45rpx;
					// letter-spacing: 1px;
					flex: 1;
				}
				.desc1{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: rgba(0,0,0,0.6);
					line-height: 22rpx;
				}
				image{
					width: 59rpx;
					height: 59rpx;
				}
			}

		}
	}

	.slot-wrap {
		padding-left: 300rpx;
		position: relative;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		// line-height: 50rpx;
		letter-spacing: 1px;
		// width: 100%;
		// text-align: center;

		.addr {

			display: flex;
			height: 50rpx;
			align-items: center;
			position: absolute;
			left: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;

			text {
				min-width: 60rpx;
				margin-right: 2rpx;
			}
		}
	}

	.infos {
		position: relative;
		z-index: 2;

		.deco {
			z-index: 1;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;

			image {
				width: 100%;
				height: 293rpx;
			}

		}

		.content {
			position: relative;
			padding-bottom: 50rpx;
			z-index: 2;

			.swiper {
				padding: 10rpx 24rpx 24rpx;
			}

			.navs {
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.item {
					width: 338rpx;
					height: 152rpx;
					padding: 0 23rpx 0 22rpx;
					display: flex;

					.name {
						padding-top: 32rpx;

						.top {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 36rpx;
							display: flex;
							align-items: center;
							// line-height: 50rpx;
						}

						.bot {
							margin-top: 8rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							line-height: 33rpx;
						}
					}

					.narrow {
						width: 16rpx;
						height: 16rpx;
						margin: 45rpx 11rpx 0 22rpx;
					}

					.img {
						width: 100rpx;
						height: 100rpx;
						margin: 30rpx 0 0;
					}

					&.one {
						background: url("/static/aidex/images/vip-bg.png") no-repeat;
						background-size: cover;
						color: #BC5F0F;
					}

					&.two {
						background: url("/static/aidex/images/1.png") no-repeat;
						background-size: cover;
						color: #0FBCAE;

						.narrow {
							width: 16rpx;
							height: 16rpx;
							margin: 0 0 0 24rpx !important;
						}

						.img {
							width: 88rpx !important;
							height: 88rpx !important;
						}
					}
				}
			}

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 33rpx;
				padding: 0 24rpx;

				.name {
					display: flex;
					align-items: center;

					.line {
						width: 7rpx;
						height: 33rpx;
						background: #00C0AE;
						margin-right: 16rpx;
					}

					font-family: PingFangSC,
					PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 45rpx;
				}

				.more {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #A3A9B9;
					line-height: 37rpx;
				}
			}

			.lawyer {
				margin: 16rpx 0;
				border-radius: 16rpx;
				padding-bottom: 0 !important;

				.nav3 {
					display: flex;
					align-items: center;

					margin: 0 20rpx;

					.item {
						// display: inline-block;
						margin-right: 20rpx;
						width: 200rpx;
						height: 290rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.2);
						border-radius: 16rpx;
						display: inline-flex;
						flex-direction: column;
						align-items: center;

						&:first-child {
							margin-left: 5rpx;
						}

						&:last-child {
							margin-right: 0;
						}

						.avatar {
							margin: 20rpx 0 0;
						}

						.name {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #000000;
							line-height: 42rpx;
							margin: 20rpx 0 8rpx 0;
						}

						.year {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #0FBCAE;
							line-height: 33rpx;
						}

						.answer {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;
							line-height: 33rpx;

							text {
								color: #EE6145;
							}
						}
					}
				}

			}

			.pick {
				border-radius: 16rpx;

				// margin-bottom: 100rpx;
				.nav2 {
					margin: 0 24rpx;

					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: flex-start;

					.item {
						border-radius: 3rpx;
						margin-bottom: 16rpx;
						width: 48.7%;
						padding: 16rpx 25rpx 16rpx 18rpx;

						display: flex;
						align-items: center;
						justify-content: space-between;
						overflow: hidden;

						&:nth-child(6n+1) {
							background: rgba(239, 123, 100, 0.05);
						}

						&:nth-child(6n+2) {
							background: rgba(249, 162, 36, 0.05);
						}

						&:nth-child(6n+3) {
							background: rgba(56, 138, 251, 0.05);
						}

						&:nth-child(6n+4) {
							background: rgba(106, 142, 241, 0.06);
						}

						&:nth-child(6n+5) {
							background: rgba(239, 123, 100, 0.05);
						}

						&:nth-child(6n+6) {
							background: rgba(239, 122, 98, 0.05);
						}



					}

					.name {
						flex: 1;

						.top {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
							line-height: 40rpx;
							margin-bottom: 6rpx;

						}

						.bot {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #A3A9B9;
							line-height: 28rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
					}

					image {
						width: 63rpx;
						height: 63rpx;
					}
				}
			}

			.ask {
				background: #FFFFFF;
				padding: 23rpx 0 20rpx;

				.nav1 {
					image {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 18rpx;
					}

					.grid-text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 1;
					}
				}

			}
		}
	}
</style>